<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    全选：<input type="checkbox" id="all">
    <ul>
        <li>
            <input type="checkbox">
            <p>名称：xx</p>
            <p>价格：xx</p>
        </li>
    </ul>
    <script>
        // 练习1：有已知已下购物车数据，每一个都选中了，则返回的全选状态为true（选中了），只要有一个没有选中则返回false(未选中了)

        let cartGoods = [
            {
                goodsname:'小米10',
                price:5000,
                isChecked:true,//代表是否选中了
            },
            {
                goodsname:'苹果10',
                price:3000,
                isChecked:false,//代表是否选中了
            },
            {
                goodsname:'苹果12',
                price:4000,
                isChecked:true,//代表是否选中了
            }
        ]
        // 循环数组，根据数组的长度生成对应个数的li
        var str = '';
        cartGoods.forEach(function(item){ // item-每一项
            console.log(item);
            str += `<li>
                <input type="checkbox" ${ item.isChecked ? 'checked' : '' }>
                <p>名称：${ item.goodsname }</p>
                <p>价格：${ item.price }</p>
            </li>`
        });
        // 生成的内容放到父元素ul里
        var ul = document.querySelector('ul');
        ul.innerHTML = str;

        // 2.每一个选项都被选中时，设置选中
        // every(): 针对于数组做判断，每一项都满足条件时，返回true，有一个不满足返回false
        var res = cartGoods.every(function(item){ // -每一项
            // return 条件：每一项的isChecked为true
            return item.isChecked == true;
        });
        console.log(res);
        // 设置全选的状态
        var all = document.querySelector('#all');
        all.checked = res;
    </script>
</body>
</html>